<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>121-轮播图.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		.carousel{
			width: 1226px;
			height: 460px;
			position: relative;
			margin: 100px auto;
		}
		.carousel .carousel-imgs-item{
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			transition: all 0.5s;
		}
		.carousel .arrow{
			position: absolute;
			top: 50%;
			z-index: 888;
			width: 40px;
			height: 80px;
			line-height: 80px;
			margin-top: -40px;
			font-size: 30px;
			font-weight: bold;
			color: #eee;
			text-align: center;
			cursor: pointer;
		}
		.carousel .arrow:hover{
			background: rgba(0,0,0,0.4);
		}
		.carousel .left-arrow{
			left: 0px;
		}
		.carousel .right-arrow{
			right: 0px;
		}
		.carousel .carousel-imgs-item img{
			width: 100%;
			height: 460px;
		}
		.carousel .carousel-btn{
			position: absolute;
			bottom: 24px;
			right: 35px;
			z-index: 888;
		}
		.carousel .arousel-btn li{
			float: left;
			width: 5px;
			height: 5px;
			border: 4px solid #b5b3ad;
			margin-left: 10px;
			background: #96938a;
			border-radius: 50%;
			cursor: pointer;
		}
		.carousel .carousel-btn li:hover,
		.carousel .carousel-btn li.active{
			border-color: #979590;
			background: #fcf9f0;
		}
	</style>
</head>
<body>
	<div class="carousel">
		<ul class="carousel-imgs">
			<li class="carousel-imgs-item" style="z-index: 99;"><img src="images/xiaomi01.jpg" alt="">
			</li>
			<li class="carousel-imgs-item"><img src="images/xiaomi02.jpg" alt="">
			</li>
			<li class="carousel-imgs-item"><img src="images/xiaomi03.jpg" alt="">
			</li>
		</ul>
		<span class="arrow left-arrow ">&lt;</span>
		<span class="arrow right-arrow ">&gt;</span>
		<ul class="carousel-btn">
			<li class="active"></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
<script>
	//1.获取元素
	var aImg = document.querySelectorAll('.carousel-imgs-item ');
	var oLeftArrow = document.querySelector('.left-arrow');
	var oRightArrow = document.querySelector('.right-arrow');
	var aBtn = document.querySelector('.carousel-btn').children;
	var oCarousel = document.querySelector('.carousel');
	var timer = 0;
	//当前图片
	var now = 0;
	/*
	切换函数
	*/
	function tab(){
		for(var i =0;i<aImg.length;i++){
					aImg[i].style.zIndex = '0';
					aBtn[i].className = '';
					aImg[i].style.opacity = '0';
				}
				aImg[now].style.zIndex = '99';
				aImg[now].style.opacity = '1';
				aBtn[now].className = 'active';
	}
	//2.添加下一张事件
	oRightArrow.onclick = function(){
		now++;
		if(now >= aImg.length){
			now = 0;
		}
		tab();
	}
	//3.添加上一张事件
	oLeftArrow.onclick = function(){
		now--;
		if(now <0){
			now = aImg.length -1;
		}
		tab();
	}
	//4.底部指示按钮事件
	for(var i =0;i<aBtn.length;i++){
		aBtn[i].index = i;	 
		aBtn[i].onclick = function(){
			now = this.index;
			tab();
		}
	}
	//5.自动播放
	timer = setInterval(oRightArrow.onclick,6000);
	oCarousel.onmouseover = function(){
		clearInterval(timer);
	}
	oCarousel.onmouseover = function(){
		timer = setInterval(oRightArrow.onclick,6000);
	}
</script>
</html>